<template>
  <div>
    <h2>公寓分配结果</h2>
    <div v-if = "allocationResult">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="搜索范围:" prop="key">
          <el-select v-model="ruleForm.key" style="width: 160px; float: left" placeholder="请选择字段">
            <el-option label="公寓号" value="dormitoryName"></el-option>
            <el-option label="姓名" value="name"></el-option>
            <el-option label="运动习惯" value="exerciseHabit"></el-option>
            <el-option label="住校经历" value="boardingExperience"></el-option>
            <el-option label="卫生习惯" value="hygieneHabit"></el-option>
            <el-option label="性格特点" value="personalityTraits"></el-option>
          </el-select>
        </el-form-item>
        <div style="border: 0 solid red;width: 400px;height: 60px;position: relative;top: -64px;left: 270px">
          <el-form-item label="搜索内容:">
            <el-input v-model="ruleForm.value" placeholder="请输入关键字" style="width: 160px;"></el-input>
            <el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;"
                       @click="submitForm('ruleForm')">搜索
            </el-button>
          </el-form-item>
        </div>
      </el-form>

      <!-- 公寓分配结果表格 -->
      <el-table :data="tableData" border stripe style="width: 100%; position: relative; top: -30px">
        <!-- 列定义 -->
        <el-table-column align="center" prop="dormitoryName" label="公寓号" sortable></el-table-column>
        <el-table-column align="center" prop="name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="exerciseHabit" label="运动习惯" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="boardingExperience" label="住校经历" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="hygieneHabit" label="卫生习惯" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="personalityTraits" label="性格特点" show-overflow-tooltip></el-table-column>
        <!-- 操作列（编辑、删除） -->
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination style="margin-top: 20px; float: right" background layout="prev, pager, next" :page-size="pageSize"
                     :total="total" :current-page.sync="currentPage" @current-change="page"></el-pagination>
    </div>
    <div v-else>
      <p>尚未进行公寓分配</p>
    </div>
    <el-button @click="goBack">返回上一页</el-button>
  </div>
</template>

<script>
export default {
  props: {
    allocationResult: Object, // 从父组件传递的公寓分配结果对象
  },


  data() {
    return {
      ruleForm: {
        key: '',    // 搜索范围
        value: '',  // 搜索内容
      },
      rules: {
        // 表单验证规则
        key: [
          {required: true, message: '请选择搜索范围', trigger: 'change'},
        ],
      },
      tableData: [],    // 表格数据
      pageSize: 10,     // 每页显示条数
      total: 0,         // 总条数
      currentPage: 1,   // 当前页码
    };
  },
  methods: {

    // 返回上一页的方法
    goBack() {
      this.$router.go(-1);
    },

    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 执行搜索操作，根据实际情况调用后端接口获取数据
          this.getData();
        }
      });
    },

    // 获取数据方法，模拟数据
    getData() {
      // 此处应根据实际情况调用后端接口获取数据，下面的代码是模拟数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = mockData.slice(start, end);
      this.total = mockData.length;
    },

    // 分页方法
    page(val) {
      this.currentPage = val;
      this.getData();
    },

    // 编辑方法
    edit(row) {
      // 编辑操作，根据实际情况处理
    },

    // 删除方法
    del(row) {
      // 删除操作，根据实际情况处理
    },
  },
  mounted() {
    // 页面加载时获取数据
    this.getData();
  },
};
</script>

<style scoped>
/* 可以在这里添加样式，如果需要的话 */
</style>
